import { Button, Form, Input, message } from "antd";
import "./register.css";
import { login, register, registerCaptcha } from "../../api/user/user";
import { useForm } from "antd/es/form/Form";
import { Link, useNavigate } from "react-router-dom";
import type { TRegisterUser } from "../../api/user/type";

import { useCallback, useRef, useState, useEffect } from "react";

const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
};
let timer: any = null
// let status = 1
let nextLoadingTime = 0
let nextStatus = 1

export function Register() {
    const [form] = useForm();
    const [loadingTime, setLoadingTime] = useState(0);
    let [status, setStatus] = useState(1)
    const initLoadingTime = () => {
        nextLoadingTime = 5
        setLoadingTime(a => nextLoadingTime); // 更新 count 的值
    };
    const upDataLoadingTime = () => {
        nextLoadingTime--
        setLoadingTime(a => nextLoadingTime); // 更新 count 的值
    };
    const upDataStatus = () => {
        if (nextStatus < 3) {
            nextStatus++
        } else {
            nextStatus = 2
        }
        setStatus((a) => nextStatus)
    }


    const navigate = useNavigate();
    const onFinish = useCallback(async (values: TRegisterUser) => {
        if (values.password !== values.confirmPassword) {
            return message.error("两次密码不一致");
        }
        await register(values);
        message.success("注册成功");

        setTimeout(() => {
            navigate("/login");
        }, 1500);



    }, []);

    const sendCaptcha = useCallback(async function () {
        const address = form.getFieldValue("email");
        if (!address) {
            return message.error("请输入邮箱地址");
        }
        try {
            await registerCaptcha({ address, flag: "register" });
            message.success("发送成功");
            initLoadingTime()
            upDataStatus()
            timer = setInterval(() => {
                if (nextLoadingTime === 0) {
                    clearInterval(timer)
                    upDataStatus()
                    console.log(status);

                } else {
                    upDataLoadingTime()
                }
            }, 1000)
        } catch (error: any) {
            message.error(error || "系统繁忙，请稍后再试");
        }
    }, []);

    return (
        <div id="register-container">
            <h1>会议室预订系统</h1>
            <Form
                form={form}
                {...layout1}
                onFinish={onFinish}
                colon={false}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: "请输入用户名!" }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="昵称"
                    name="nickName"
                    rules={[{ required: true, message: "请输入昵称!" }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: "请输入密码!" }]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="确认密码"
                    name="confirmPassword"
                    rules={[{ required: true, message: "请输入确认密码!" }]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        { required: true, message: "请输入邮箱!" },
                        { type: "email", message: "请输入合法邮箱地址!" },
                    ]}
                >
                    <Input />
                </Form.Item>

                <div className="captcha-wrapper">
                    <Form.Item
                        label="验证码"
                        name="captcha"
                        rules={[{ required: true, message: "请输入验证码!" }]}
                    >
                        <Input />
                    </Form.Item>
                    {status === 1 ?
                        <Button type="primary" onClick={sendCaptcha}>
                            发送验证码
                        </Button> : status === 2 ? <Button type="primary" loading>
                            {loadingTime}s
                        </Button> : <Button type="primary" onClick={sendCaptcha}>
                            重新发送
                        </Button>
                    }
                </div>

                <Form.Item {...layout2}>
                    <div className="links">
                        已有账号？去<Link to="/login">登录</Link>
                    </div>
                </Form.Item>

                <Form.Item {...layout1} label=" ">
                    <Button className="btn" type="primary" htmlType="submit">
                        注册
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}
